<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar title="诉求"></custom-nav-bar>
		<view class="my-appeal">
			<uni-tag v-for="(item, index) in simpleAppealList" :key="item.id" :text="item.title"
				:type="item.selected ? 'primary' : ''" size="big" class="tag-item" @click="toggleTag(item.id)" />
		</view>
		<view class="appeal-desc">
			<text>{{ appeal?.description || '暂无描述' }}</text>
		</view>
		<view class="legal-basis" v-if="showCollapse">
			<uni-collapse :key="collapseKey">
				<legal-basis :basis="appeal.basis" v-if="appeal && appeal.basis"></legal-basis>
				<similar-cases :cases="appeal.cases" v-if="appeal && appeal.cases"></similar-cases>
				<key-evidence :evidence="appeal.evidence" v-if="appeal && appeal.evidence"></key-evidence>
				<!-- <violation-behavior v-if="showViolationBehavior"></violation-behavior> -->
			</uni-collapse>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';

	import {
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"

	import {
		apiGetAllSimpleAppeals,
		apiGetAppeal,
	} from "@/api/apis.js"

	const simpleAppealList = ref([])
	const appeal = ref()
	const collapseKey = ref(0);
	const showCollapse = ref(Boolean);

	const showViolationBehavior = () => {
		return false
	}
	const isAppealInitialized = () => {
		return appeal.value && appeal.value.basis !== undefined;
	};

	const getAllSimpleAppeals = async () => {
		let res = await apiGetAllSimpleAppeals();
		simpleAppealList.value = res.data.list.map(item => ({
			...item,
			selected: false
		}));
		if (simpleAppealList.value.length > 0) {
			toggleTag(simpleAppealList.value[0].id); // 选中第一个标签
		}
	};

	const getAppeal = async (id) => {
		let res = await apiGetAppeal(id);
		appeal.value = res.data
		refreshCollapse()
	};

	const refreshCollapse = () => {
		collapseKey.value++;
		nextTick(() => {
			showCollapse.value = false;
			nextTick(() => {
				showCollapse.value = true;
			});
		});
	}

	getAllSimpleAppeals()

	// 切换标签的选中状态
	const toggleTag = (id) => {
		simpleAppealList.value.forEach(item => {
			if (item.id === id) {
				item.selected = true; // 设置当前标签为选中
			} else {
				item.selected = false; // 其他标签不选中
			}
		});
		if (id) {
			getAppeal(id);
		}
	};

	onMounted(() => {

	});

	//分享给好友
	onShareAppMessage((e) => {
		return {
			title: "职场冲冲",
			path: "/pages/index/index"
		}
	})

	// 监听用户点击右上角转发到朋友圈
	onShareTimeline(() => {
		return {
			title: '职场冲冲',
			// path: "/pages/classify/classify"
		}
	})
</script>

<style lang="scss" scoped>
	.homeLayout {
		width: 100%;
		padding: 10rpx;

		.my-appeal {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			padding: 16rpx 10rpx;
			background-color: #f9f9f9;
			border-radius: 8rpx;
			margin: 20rpx 0;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

			.tag-item {
				margin: 8rpx;
			}
		}

		.appeal-desc {
			padding: 10rpx 25rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
			border-top: 1rpx solid;
		}

		.legal-basis {
			padding: 0 10rpx;
		}

		::v-deep .uni-collapse-item__title-text {
			font-size: 34rpx;
		}
	}
</style>